<template>
  <div>
    <!--面包屑功能-->
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>货品管理</el-breadcrumb-item>
      <el-breadcrumb-item>货品进货</el-breadcrumb-item>
    </el-breadcrumb> -->

    <h1 style="text-align: center; margin-top: 2px">商品进货单据</h1>
    <el-form :model="inProObj" :rules="inProObjRules" ref="inProObjForm">
      <el-descriptions class="margin-top" title="进货信息" :column="3" :size="''" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="AddInProduct">保存</el-button>
          <el-button type="primary" size="small" @click="golist">取消</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            商品名
          </template>
          <el-input v-model="GoodName" :disabled="true"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            货物来源
          </template>
          <el-input v-model="inProObj.InproBH" placeholder="请输入进货单编号/供货商"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            单据编号
          </template>
          <el-input v-model="inProObj.InProZDBH" :disabled="true" placeholder="请输入内容"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            进货时间
          </template>
          <el-date-picker v-model="inProObj.JHRQ" type="date" placeholder="进货时间"> </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            商品总价
          </template>
          <el-input :value="zongfeiyong" placeholder="请输入总价" :disabled="true"></el-input>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            商品数量
          </template>
          <el-input :value="zongshuliang" placeholder="请输入数量" :disabled="true"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            其他费用
          </template>
          <el-input v-model="inProObj.JHQTFY" placeholder="请输入其他费用"></el-input>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            备注
          </template>
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" v-model="inProObj.bz" placeholder="请输入说明"></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <el-card>
      <el-table :data="InProList" height="400" border style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="GoodProName" label="货品名" width="300"></el-table-column>
        <el-table-column prop="GoodAttr" label="参数组合" width="180"> </el-table-column>
        <el-table-column label="单价" width="180">
          <template slot-scope="scope">
            <el-input v-model.lazy="scope.row.ProJG" @input="changeDJ(scope.$index)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="180">
          <template slot-scope="scope">
            <el-input v-model.lazy="scope.row.ProSL" @input="changeSL(scope.$index)"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="180">
          <template slot-scope="scope">
            <el-input v-model="scope.row.XJ" :disabled="true"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="240">
          <template slot-scope="scope">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容" v-model="scope.row.bz"> </el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  props: ['gid'], // 接收路由参数
  data() {
    return {
      GoodId: 0, // 商品id
      GoodName: '', // 商品名
      // 主表对象数据
      inProObj: {
        InproBH: '', // 供应商单号
        InProZDBH: '', // 自动编号
        ProJJZG: 0, // 总价
        proJJSL: 0, // 总数量
        JHRQ: '', // 日期
        JHQTFY: 0, // 其他费用
        bz: '', // 备注
        GoodId: '', // 所属商品
        GoodName: '', // 所属商品名称
      },
      inProObjRules: {
        InproBH: [
          { required: true, message: '请输入单号', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' },
        ],
        JHRQ: [{ required: true, message: '请选择日期', trigger: 'blur' }],
      },
      // 货品列表
      InProList: [],
    }
  },
  methods: {
    // 读取该商品及该单据相关信息
    async getGoods_Product() {
      // 由于后台的参数名是goodid 所以不能由路由传数据，需要用url传
      const { data: res } = await this.$http.get('InProduct?goodid=' + this.gid)
      if (res.meta.status !== 200) {
        return this.$message.warning('获取后台数据出错')
      }
      // 设置数据到数据上
      this.InProList = res.data.ProList // 进货货品列表
      this.GoodName = res.data.GoodName // 商品名
      this.GoodId = this.gid // goodid
      this.inProObj.InProZDBH = res.data.InProZDBH
    },
    // 更改单价文本框
    changeDJ(index) {
      // 获取索引
      this.InProList[index].XJ = this.InProList[index].ProSL * this.InProList[index].ProJG
      console.log(this.InProList)
    },
    // 更变数量单选框
    changeSL(index) {
      this.InProList[index].XJ = this.InProList[index].ProSL * this.InProList[index].ProJG
      console.log(this.InProList)
    },
    // 转到list页
    golist() {
      // 用动态路由转
      this.$router.push('/produc')
    },
    // 增加进货确认功能
    AddInProduct() {
      // 检查验证通过,略
      this.$refs.inProObjForm.validate(async (valid) => {
        if (!valid) {
          return this.$message.warning('验证末通过')
        }
        if (this.zongshuliang === 0) {
          return this.$message.warning('暂末设置货品，不能提交')
        }
        // 处理数据
        this.inProObj.ProJJZG = this.zongfeiyong // 总价，用属性总费用赋值
        this.inProObj.proJJSL = this.zongshuliang // 总数量
        this.inProObj.GoodId = this.GoodId // 从数据中获取到
        this.inProObj.GoodName = this.GoodName // 商品的名称
        // 详细表数据处理
        this.InProList.forEach(item => {
          item.InProZDBH = this.inProObj.InProZDBH
        })
        // 调用ajax
        const { data: res } = await this.$http.post('InProduct', {
          InProObject: this.inProObj, // 主表数据
          InProInfoTab: this.InProList // 从表数据
        })
        console.log(res)
        if (res.meta.status !== 200) {
          return this.$message.warning('进货单据处理失败')
        }
        this.$message.success('进货单据处理成功')
        this.$router.push('/produc')
      })
    }
  },
  mounted() {
    // 加载组件形成时读取
    this.getGoods_Product()
  },
  created() {},
  // 计算属性定义
  computed: {
    // 总数量
    zongshuliang: function () {
      let zs = 0
      this.InProList.forEach((item) => {
        if (item.ProSL !== 0 && item.ProJG !== 0) {
          zs += parseInt(item.ProSL)
        }
      })
      return zs
    },
    // 总计费用
    zongfeiyong: function () {
      let fy = 0
      this.InProList.forEach((item) => {
        if (item.ProSL !== 0 && item.ProJG !== 0) {
          fy += item.ProSL * item.ProJG
        }
      })
      return fy
    },
  },
  // 侦听器
  watch: {
    // 侦听器实现观测
    // InProList: {
    //   function(val) {
    //     let zs = 0
    //     let fy = 0
    //     val.forEach((item) => {
    //       if (item.ProSL !== 0 && item.ProJG !== 0) {
    //         zs += item.ProSL
    //         fy += item.ProSL * item.ProJG
    //       }
    //     })
    //     // 设置到主单对象中
    //     this.inProObj.proJJSL = zs
    //     this.inProObj.ProJJZG = fy
    //     console.log(this.inProObj.proJJSL)
    //     console.log(this.inProObj.ProJJZG)
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
}
</script>

<style>
</style>
